<template>
  <div class="frame">
    <Header></Header>
    <div class="banxin">
      <div class="top">
        <div class="head_portrait">
          <img v-if="picture" :src="picture" alt="" />
          <img v-else src="../../assets/头像.jpg" alt="" />
        </div>
        <p class="nick-name">“ {{ uname }} ”</p>
        <ul class="userData">
          <li>
            <span>{{ accessData }}</span> 被访问
          </li>
          <li>
            <span>{{ originalData }}</span> 原创
          </li>
          <li>
            <span>{{ ranking }}</span> 排名
          </li>
          <li>
            <span>{{ fansData }}</span> 粉丝
          </li>
          <br />

          <li v-if="birthday"><span>出生日期：</span>{{ birthday }}</li>
          <li v-if="semester"><span>期制：</span>{{ semester }}</li>
          <br />
          <li v-if="professional"><span>专业：</span>{{ professional }}</li>

          <li v-if="area"><span>所在地区：</span>{{ area }}</li>
        </ul>

        <el-button
          round
          class="get-attention editData"
          @click="getAttention(accessUid)"
          v-if="isAccess && isAttention"
          >关注</el-button
        >
        <el-button
          round
          class="get-attention editData"
          @click="cancelAttention(accessUid)"
          v-if="isAccess && !isAttention"
          >取消关注</el-button
        >
        <el-button round class="editData" @click="toWriteData" v-if="!isAccess"
          >编辑资料</el-button
        >
      </div>
      <div class="body">
        <!-- 左边部分 -->
        <div class="left">
          <section>1</section>
          <section>2</section>
          <section>3</section>
          <section>4</section>
          <section>5</section>
        </div>
        <!-- 右边部分 -->
        <div class="right">
          <el-tabs v-model="activeName">
            <el-tab-pane name="first">
              <div slot="label">最近</div>
            </el-tab-pane>
            <el-tab-pane name="second">
              <div slot="label" @click.prevent="toAllArticle">文章</div>
            </el-tab-pane>
            <el-tab-pane name="third" v-if="!isAccess">
              <div slot="label" @click.prevent="toBrowsingHistory">
                浏览历史
              </div>
            </el-tab-pane>
            <el-tab-pane name="fourth">
              <div slot="label" @click.prevent="toCollection">收藏</div>
            </el-tab-pane>
            <el-tab-pane name="fifth">
              <div
                slot="label"
                @click.prevent="toAttentionList"
                v-if="!isAccess"
              >
                关注
              </div>
            </el-tab-pane>
            <el-tab-pane name=" sixth">
              <div slot="label" @click.prevent="toFansList" v-if="!isAccess">
                粉丝
              </div>
            </el-tab-pane>
          </el-tabs>
          <div class="view"><router-view></router-view></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
import { mixin } from "../../mixin";
export default {
  name: "PersonalCenter",
  components: {
    Header,
  },
  data() {
    return {
      uname: "", //用户名
      accessData: "24,396", //被访问数据
      originalData: 41, //原创数量
      ranking: "21,910", //排名
      fansData: 299, //粉丝数量
      professional: "", //专业
      semester: "", //期制
      birthday: "", //出生日期
      area: "", //所在地区
      activeName: "second",
      picture: "", //图片路径
      uid: "", //用户id
      isAttention: false, //是否被关注
      accessUid: "", //被访问用户id
      isAccess: false, //是否访问他人
    };
  },
  //混入，引入时间戳处理函数
  mixins: [mixin],
  methods: {
    //跳转查看博客
    toAllArticle() {
      this.$router.push({
        name: "AllArticle",
        query: {
          id: this.uid,
        },
      });
    },
    //跳转浏览历史
    toBrowsingHistory() {
      this.$router.push({
        name: "BrowsingHistory",
      });
    },
    //跳转查看博客
    toCollection() {
      this.$router.push({
        name: "Collection",
        query: {
          id: this.uid,
        },
      });
    },
    //跳转查看关注列表
    toAttentionList() {
      this.$router.push({
        name: "AttentionList",
        query: {
          id: this.uid,
        },
      });
    },
    //点击跳转编写资料页面
    toWriteData() {
      this.$router.push({
        name: "WriteData",
      });
    },
    //点击跳转编写资料页面
    toFansList() {
      this.$router.push({
        name: "FansList",
        query: {
          id: this.uid,
        },
      });
    },
    //页面加载
    dataLoad(uid) {
      this.$http({
        method: "post",
        url: "user/findUserDetailById",
        params: {
          uid: uid, //博客id
        },
      }).then(({ data }) => {
        if (data.flag) {
          const userInfo = data.data[0];
          this.uname = userInfo.username;
          this.professional = userInfo.specialized;
          this.semester = userInfo.semester;
          this.birthday = this.timeDetal(userInfo.birthday);
          this.area = userInfo.address;
          this.picture = "http://" + userInfo.picture;
          this.uid = userInfo.uid;
        } else {
          console.log(data);
        }
      });
    },
    pageLoad() {
      let userData = JSON.parse(sessionStorage.getItem("LoginMessage")).message;
      //判断是否带参数访问
      if (this.$route.query.id) {
        //判断是否访问自己主页
        if (this.$route.query.id == userData.uid) {
          //访问自己主页
          console.log("访问自己的主页");
          this.dataLoad(userData.uid);
        } else {
          //访问他人主页
          //关注回显 判断是否关注他人
          this.showAttentionStatus(this.$route.query.id);
          this.isAccess = true;
          console.log("访问他人的主页");
          this.dataLoad(this.$route.query.id);
        }
      } else {
        this.dataLoad(userData.uid);
      }
    },
  },
  watch: {
    activeName() {
      sessionStorage.setItem("activeName", this.activeName);
    },
    $route() {
      //监听到路由（参数）改变
      location.reload();
    },
  },
  mounted() {
    //存储点击序号
    if (sessionStorage.getItem("activeName")) {
      this.activeName = sessionStorage.getItem("activeName");
    }
    this.pageLoad();
  },
  beforeDestroy() {
    if (sessionStorage.getItem("activeName")) {
      sessionStorage.removeItem("activeName");
    }
  },
};
</script>

<style lang="less" scoped>
.frame {
  width: 100%;
  background-color: #fafafa;
  .banxin {
    // 头部框样式
    .top {
      color: #4b4a4a;
      width: 100%;
      position: relative;
      height: 300px;
      background-color: #fff;
      margin-top: 100px;
      box-shadow: 0 0 10px 0px rgb(219, 218, 218);
      .editData {
        position: absolute;
        bottom: 30px;
        right: 50px;
        padding: 8px 30px;
        letter-spacing: 3px;
      }
      .get-attention {
        padding: 8px 40px;
        letter-spacing: 3px;
      }
      .head_portrait {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: white;
        text-align: center;
        left: 50%;
        box-shadow: 0 0 10px 0px rgb(219, 218, 218);
        transform: translate(-50%, -50%);
        position: absolute;
        overflow: hidden;
        &:hover {
          .mask {
            display: block;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      //昵称
      .nick-name {
        font-size: 20px;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 75px;
      }
      //数据样式
      .userData {
        position: relative;
        // width: 100%;
        text-align: center;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        top: 100px;
        margin-top: 10px;
        text-align: center;

        li {
          display: inline-block;
          padding: 0px 10px;
          margin: 10px 0px;
          span {
            font-weight: 700;
          }
        }
      }
      //个人简介
      .personalProfile {
        width: 500px;
        position: absolute;
        top: 230px;
        left: 50%;
        transform: translate(-50%, 0);

        span {
          font-weight: 700;
        }
      }
    }
    //主体样式
    .body {
      width: 100%;
      margin-top: 50px;
      position: relative;
      margin-bottom: 50px;

      .left {
        width: 300px;
        float: left;
        top: 0px;
        left: 0px;
        section {
          background-color: #fff;
          box-shadow: 0 0 10px 0px rgb(219, 218, 218);
          width: 100%;
          height: 150px;
          margin-bottom: 10px;
        }
      }
      .right {
        width: 930px;
        position: relative;
        margin-left: 350px;
        background-color: #fff;
        box-shadow: 0 0 10px 0px rgb(219, 218, 218);
        // height: 1800px;
        padding-bottom: 20px;
        top: 0px;
        .el-tabs {
          margin: 20px;
        }

        .view {
          padding: 0px 15px;
        }
      }
    }
  }
}
</style>